<template>
    <el-select
            @change="change"
            class="commonSelect"
            popper-class="commonSelectList"
            :multiple="multiple"
            :disabled="disabled"
            :size="size"
            :remote="remote"
            :filterable="filterable"
            :reserveKeyword="reserveKeyword"
            v-bind="$attrs"
            v-on="$listeners"
            :clearable="clearable"
            :placeholder="placeholder?placeholder:'请选择'">
        <el-option
                v-for="item in data"
                :key="item[defaultProps.value]"
                :label="item[defaultProps.label]"
                :value="item[defaultProps.value]">
        </el-option>
    </el-select>
</template>

<script>
    export default {
        value:String,
        data() {
            return {
                value : ''
            }
        },
        props: {
            data: {
                type: Array,
                default: function() {
                    return [];
                }
            },
            remoteList: {
                type: Array,
                default: function() {
                    return [];
                }
            },
            multiple: Boolean,
            disabled: Boolean,
            remote:Boolean,
            filterable:Boolean,
            reserveKeyword:Boolean,
            placeholder: String,
            size: String,
            clearable:{
                type:Boolean,
                default:false,
            },
            defaultProps: {
                type: [Object, Function],
                default: function () {
                    return {
                        value: 'value',
                        label: 'label',
                    };
                }
            },
        },
        methods: {
            change(val) {
//                console.log('====================')
//                console.log(val)
//                this.$emit('change', val)
            },
            remoteMethod(query) {
                if (query !== '') {
                    this.loading = true;
                    setTimeout(() => {
                        this.loading = false;
                        this.data = this.list.filter(item => {
                            return item.label.toLowerCase()
                                .indexOf(query.toLowerCase()) > -1;
                        });
                    }, 200);
                } else {
                    this.options = [];
                }
            }
        },
        mounted() {
            if(this.remote) {
                this.data = this.remoteList.map(item => {
                    return { value: `${item.id}`, label: `${item.label}` };
                });
            }
        },
    }
</script>